<template>
  <bs-dialog :title="terminalId === 0 ? '多终端查看屏幕' : '查看屏幕'" :visible="visible" @update:visible="updateVisible" size="default" class="deviceDialog" @opened="loadScreenData" :before-close="doCloseEdit">
    <template slot="main">
      <el-tabs v-model="activeName" @tab-click="deviceTabsHandleClick">
        <el-tab-pane label="1号屏" name="first" v-show="editorForm.b"></el-tab-pane>
        <el-tab-pane label="2号屏" name="second" v-show="editorForm.c"></el-tab-pane>
        <el-tab-pane label="3号屏" name="thread" v-show="editorForm.d"></el-tab-pane>
        <el-tab-pane label="4号屏" name="four" v-show="editorForm.e"></el-tab-pane>
        <el-tab-pane label="5号屏" name="five" v-show="editorForm.f"></el-tab-pane>
      </el-tabs>

      <el-form :inline="false" :model="editorForm" :rules="editorFormRules" ref="editorFormRef" label-width="110px" size="small" :show-message="false" :hide-required-asterisk="true" :status-icon="false">
        <input v-model="terminalId" type="hidden" />
        <div v-show="activeName === 'first'">
            <SetAttr :editorForm="editorForm.b" :activeName="activeName" @edit="isEditForm" @reset="handleResetFormData" @set="handleSetPlayAttrInfo"></SetAttr>
        </div>
        <div v-show="activeName === 'second'">
            <SetAttr :editorForm="editorForm.c" :activeName="activeName" @edit="isEditForm" @reset="handleResetFormData" @set="handleSetPlayAttrInfo"></SetAttr>
        </div>
        <div v-show="activeName === 'thread'">
            <SetAttr :editorForm="editorForm.d" :activeName="activeName" @edit="isEditForm" @reset="handleResetFormData" @set="handleSetPlayAttrInfo"></SetAttr>
        </div>
        <div v-show="activeName === 'four'">
            <SetAttr :editorForm="editorForm.e" :activeName="activeName" @edit="isEditForm" @reset="handleResetFormData" @set="handleSetPlayAttrInfo"></SetAttr>
        </div>
        <div v-show="activeName === 'five'">
            <SetAttr :editorForm="editorForm.f" :activeName="activeName" @edit="isEditForm" @reset="handleResetFormData" @set="handleSetPlayAttrInfo"></SetAttr>
        </div>
      </el-form>
    </template>

    <template slot="footer">
      <el-button type="primary" size="small" @click.native="doSave" v-has="'SCREEN_PHYSICAL_SCREEN_SETTINGS_SAVE'">保存</el-button>
      <el-button size="small" @click.native="doCloseEdit">关闭</el-button>
    </template>
  </bs-dialog>
</template>

<script>
import SetAttr from './SetAttr'
import ScreenApi from '@/api/screen'
import { deepClone, cleanEmptyKey } from '@/utils/index'
export default {
    components: { SetAttr },
    data() {
        return {
            title: '',
            activeName: 'first',
            editorForm: {},
            sourceForm: {},
            editorFormRules: {
            },
            isEdit: false,
        }
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        terminalId: {
            type: [String, Number],
            default: 0
        }
    },
    methods: {
        resetEditForm() {
            this.editorForm = {
                b: {},
                c: {},
                d: {},
                e: {},
                f: {}
            }
            this.sourceForm = deepClone(this.editorForm)
            this.activeName = 'first'
            this.isEdit = false
        },
        async loadScreenData() {
            this.resetEditForm();
            if(this.terminalId === 0) {
                return
            }
            const res = await ScreenApi.getPhysicalSetInfo({terminalId: this.terminalId})
            if(res.screenArgus) {
                const screenArgus = JSON.parse(res.screenArgus) || []
                screenArgus.map(item => {
                    this.editorForm[item.addr] = item
                })
            }
            this.sourceForm = deepClone(this.editorForm)
            console.log('详情:', this.editorForm, this.sourceForm)
        },
        updateVisible(v) {
            this.$emit('update:visible', v)
        },
        deviceTabsHandleClick({ name }) {
            this.activeName = name || 'first'
        },
        async doCloseEdit() {
            if(this.isEdit) {
                const res = await this.$confirm('提示', '参数调整未保存，确定关闭吗？');
                if(!res) {
                    return false
                }
            }
            this.resetEditForm()
            this.updateVisible(false)
        },
        doSave() {
            this.$emit('save', this.editorForm)
            this.resetEditForm()
            this.updateVisible(false)
        },
        isEditForm() {
            this.isEdit = true
        },
        deleteFormItem(formItem, type, sourceFormItem) {
            if(type === 1) {
                if(sourceFormItem && sourceFormItem.brightness) {
                    this.$set(formItem, 'brightness', sourceFormItem.brightness)
                    console.log('修改brightness属性')
                    return
                }
                // 为何需要删除2次才能成功?
                console.log('删除brightness属性')
                this.$delete(formItem, 'brightness');
                setTimeout(() => {
                    delete formItem.brightness
                }, 500);
            } else if(type === 2) {
                if(sourceFormItem && sourceFormItem.volumn) {
                    this.$set(formItem, 'volumn', sourceFormItem.volumn)
                    console.log('修改volumn属性')
                    return
                }
                console.log('删除volumn属性')
                this.$delete(formItem, 'volumn');
                setTimeout(() => {
                    delete formItem.volumn
                }, 500);
                
            }
        },
        handleResetFormData(type) {
            if(this.activeName === 'first') {
                this.deleteFormItem(this.editorForm.b, type, this.sourceForm.b)
            } else if(this.activeName === 'second') {
                this.deleteFormItem(this.editorForm.c, type, this.sourceForm.c)
            } else if(this.activeName === 'thread') {
                this.deleteFormItem(this.editorForm.d, type, this.sourceForm.d)
            } else if(this.activeName === 'four') {
                this.deleteFormItem(this.editorForm.e, type, this.sourceForm.e)
            } else if(this.activeName === 'five') {
                this.deleteFormItem(this.editorForm.f, type, this.sourceForm.f)
            }
        },
        handleSetPlayAttrInfo(data, type) {
            if(this.activeName === 'first') {
                if(type == 'brightness') {
                    this.editorForm.b.brightnessList = data
                } else {
                    this.editorForm.b.volumesList = data
                }
            } else if(this.activeName === 'second') {
                if(type == 'brightness') {
                    this.editorForm.c.brightnessList = data
                } else {
                    this.editorForm.c.volumesList = data
                }
            } else if(this.activeName === 'thread') {
                if(type == 'brightness') {
                    this.editorForm.d.brightnessList = data
                } else {
                    this.editorForm.d.volumesList = data
                }
            } else if(this.activeName === 'four') {
                if(type == 'brightness') {
                    this.editorForm.e.brightnessList = data
                } else {
                    this.editorForm.e.volumesList = data
                }
            } else if(this.activeName === 'five') {
                if(type == 'brightness') {
                    this.editorForm.f.brightnessList = data
                } else {
                    this.editorForm.f.volumesList  = data
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form {
  padding: 0 10px 0 15px;
}
::v-deep .el-dialog {
  width: 550px;
  height: 420px;
}
::v-deep .el-radio-group {
    padding-left: 0px !important;
}
::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 20px !important;
}
::v-deep .el-slider__marks-text:last-child {
    left: initial;
    right: -30px;
}
</style>